<template>
	<view class="index-page">
		<!-- 欢迎区域 -->
		<view class="welcome-section">
			<text class="welcome-title">欢迎使用小程序模板</text>
			<text class="welcome-subtitle">基于 UniApp 开发的通用微信小程序模板</text>
		</view>
		
		<!-- 功能导航 -->
		<view class="feature-nav">
			<view 
				v-for="feature in features" 
				:key="feature.id"
				class="feature-item"
				@click="handleFeatureClick(feature)"
			>
				<view class="feature-icon">{{ feature.icon }}</view>
				<text class="feature-name">{{ feature.name }}</text>
				<text class="feature-desc">{{ feature.description }}</text>
			</view>
		</view>
		
		<!-- 开发提示 -->
		<view class="dev-tips">
			<view class="tips-header">
				<text class="tips-title">开发提示</text>
			</view>
			<view class="tips-content">
				<view 
					v-for="tip in devTips" 
					:key="tip.id"
					class="tip-item"
				>
					<text class="tip-number">{{ tip.number }}</text>
					<text class="tip-text">{{ tip.text }}</text>
				</view>
			</view>
		</view>
		
		<!-- 快速开始 -->
		<view class="quick-start">
			<view class="start-header">
				<text class="start-title">快速开始</text>
			</view>
			<view class="start-content">
				<text class="start-text">1. 在 pages 目录下创建新页面</text>
				<text class="start-text">2. 在 api 目录下添加接口</text>
				<text class="start-text">3. 在 store 目录下管理状态</text>
				<text class="start-text">4. 在 components 目录下创建组件</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 功能导航数据
const features = ref([
	{
		id: 1,
		name: '页面开发',
		description: '快速创建新页面',
		icon: '📱',
		action: 'createPage'
	},
	{
		id: 2,
		name: '接口管理',
		description: '统一管理API接口',
		icon: '🌐',
		action: 'manageApi'
	},
	{
		id: 3,
		name: '状态管理',
		description: '全局状态管理',
		icon: '📊',
		action: 'manageState'
	},
	{
		id: 4,
		name: '组件开发',
		description: '可复用组件',
		icon: '🧩',
		action: 'createComponent'
	}
])

// 开发提示
const devTips = ref([
	{
		id: 1,
		number: '1',
		text: '遵循项目开发规范'
	},
	{
		id: 2,
		number: '2',
		text: '使用统一的命名规范'
	},
	{
		id: 3,
		number: '3',
		text: '保持代码风格一致'
	},
	{
		id: 4,
		number: '4',
		text: '及时更新文档'
	}
])

// 处理功能点击
const handleFeatureClick = (feature) => {
	console.log('点击功能:', feature.name)
	
	// 这里可以根据需要添加具体的跳转逻辑
	uni.showToast({
		title: `点击了${feature.name}`,
		icon: 'none'
	})
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';

.index-page {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 32rpx;
}

.welcome-section {
	text-align: center;
	margin-bottom: 48rpx;
}

.welcome-title {
	display: block;
	font-size: 48rpx;
	font-weight: bold;
	color: #262626;
	margin-bottom: 16rpx;
}

.welcome-subtitle {
	display: block;
	font-size: 28rpx;
	color: #595959;
}

.feature-nav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24rpx;
	margin-bottom: 48rpx;
}

.feature-item {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 32rpx;
	text-align: center;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.feature-icon {
	font-size: 64rpx;
	margin-bottom: 16rpx;
}

.feature-name {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	color: #262626;
	margin-bottom: 8rpx;
}

.feature-desc {
	display: block;
	font-size: 24rpx;
	color: #595959;
}

.dev-tips {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 48rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.tips-header {
	margin-bottom: 24rpx;
}

.tips-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #262626;
}

.tip-item {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.tip-number {
	width: 40rpx;
	height: 40rpx;
	background-color: #007AFF;
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	font-weight: bold;
	margin-right: 16rpx;
}

.tip-text {
	font-size: 28rpx;
	color: #262626;
}

.quick-start {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 32rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.start-header {
	margin-bottom: 24rpx;
}

.start-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #262626;
}

.start-content {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.start-text {
	font-size: 28rpx;
	color: #262626;
	line-height: 1.5;
}
</style>
